<template>
  <div class="pointer-events-auto relative h-full w-full">
    <!-- 二维图片 -->
    <div class="pointer-events-auto relative h-full w-full overflow-hidden">
      <img
        v-if="photoUrl"
        class="absolute left-0 top-0 h-full w-full"
        :src="photoUrl"
      />
      <template v-else>
        <div class="left-1/8 absolute top-0 h-4/5 w-4/5 text-center">
          <img class="w-full" src="/static/bimface/3d.png" />
          <span class="text-4xl font-bold">请上传图片</span>
        </div>
      </template>

      <div
        class="point-wrap relative z-0 h-full w-full"
        @click="onSelectPoint({})"
      >
        <template v-for="(item, idx) in pointList" :key="idx">
          <a
            class="pointer-events-auto absolute cursor-pointer"
            :style="{ top: item.top, left: item.left }"
            @click.stop="onSelectPoint(item)"
          >
            <img
              v-if="item.stationId !== currentStationId"
              src="/static/devices/measure-point.png"
              class="relative h-6 w-6 select-none"
            />
            <img
              v-else
              src="/static/screen/icon-measure-1.png"
              class="relative h-6 w-6 select-none"
            />
          </a>
        </template>
      </div>

      <div
        class="bg-linear-to-r absolute right-1 top-10 flex h-10 items-center from-[#000E1DFF] from-0% to-[#021C36FF] to-100% px-4"
      >
        <div class="flex flex-1 items-center justify-center">
          <div class="mr-2 h-3 w-3 bg-[#4FBF3DFF]"></div>
          <div class="text-sm">测点</div>
        </div>
      </div>
    </div>

    <WaveChart
      v-if="currentStationId"
      ref="waveRef"
      :stationId="currentStationId"
      :structureName="structureName"
      class="relative"
    ></WaveChart>
  </div>
</template>

<script setup lang="tsx">
import { nextTick, onMounted, ref, watch } from 'vue';
import { getScene2dPreviewDetail } from '@/pages/screen/api';
import { eventBus } from '@/utils/eventMitt';
import { useOl } from '../../../../olMap/index.vue';
import WaveChart from '../../wave-chart/index.vue';

const waveRef = ref();

const structureId = ref(history.state.structureId || '');
const photoUrl = ref(history.state.photoUrl || '');

// 监测阵下监测点信息
const pointList = ref([]);
const init = async () => {
  // 监测阵下监测点信息
  const pointRes = await getScene2dPreviewDetail({
    structureId: structureId.value,
  });
  pointList.value = pointRes.data;
};

// 计算设备信息(强震仪，边缘终端，智能电源数量)
// const dictArr = ['device_type'];
// const { deviceTypeEnum } = useDicts(dictArr);
// const deviceInfo = computed(() => {
//   let seismograph = 0;
//   let power = 0;
//   let terminal = 0;
//   const alarmDeviceList = []; //告警中的设备
//   pointList.value.forEach((item) => {
//     if (item.powerSupplyId) power++;
//     if (item.edgeCode) terminal++;
//     if (item.station) seismograph++;
//     if (item.tiggerCount > 0)
//       alarmDeviceList.push(
//         `${item.deviceCode}${deviceTypeEnum.value[item.type]?.text}`,
//       );
//   });
//   return {
//     seismograph,
//     power,
//     terminal,
//     alarmDeviceList,
//   };
// });

onMounted(() => {
  // 清除地图上的标记
  const { removeFeature } = useOl();
  removeFeature();
  nextTick(() => {
    init();
  });
});

// 监听左侧下拉框变化:重新获取测点信息
eventBus.on('changeStructure', (data: any) => {
  structureId.value = data.structureId;
  photoUrl.value = data.photoUrl;
});
watch(
  () => structureId.value,
  () => {
    init();
  },
);

const currentStationId = ref();
const structureName = ref();
const onSelectPoint = (item) => {
  currentStationId.value = item.stationId;
  structureName.value = item.pointName;
};
</script>

<style lang="scss" scoped>
.popup-container {
  padding: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  // width: 437px;
  height: 214px;
  background-image: url('/static/screen/popup-bg.png');
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}

.expand-icon {
  position: absolute;
  // left: 438px;
  bottom: 78px;
  width: 32px;
  height: 58px;
  // background-image: url('/static/screen/popup-close.png');
  background-size: 100% 100%;
}
</style>
